<template>
<!--  <el-card class="box-card">-->

     <div slot="header" class="clearfix">
        <div  style="font-size:150%">个人需求面板
        <el-select v-model="typeId" placeholder="请选择" @change="changetypeId()">
          <el-option
            v-for="item in typeList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
          </div>
      <br>

      <shopee-table :data="tableData" style="width: 100%" v-loading="loading">
        <shopee-table-column prop="fix_version" label="版本" :width="150"></shopee-table-column>
        <shopee-table-column
          label="需求" :width="350" :fixed="fixed">
          <template slot-scope="{row}">
              <div slot="reference">
                      <el-link target="_blank" :href="'https://jira.shopee.io/browse/'+row.key" type="primary">{{row.key + "-" + row.summary}}</el-link>
              </div>
          </template>
        </shopee-table-column>
        <shopee-table-column prop="status" label="需求状态"  :width="100"></shopee-table-column>
<!--        <shopee-table-column prop="scp_result" label="增量覆盖率"  :width="250" v-if="typeId==='Leader' || typeId!=='PM'">-->
<!--          <template slot-scope="props">-->
<!--            <div v-if="props.row.scp_result === ''">尚未部署测试</div>-->
<!--            <el-button @click="openDialog(props.row)" type="text" v-else-if="props.row.scp_result !== '' && props.row.scp_pass_result === false" style="color:red;">-->
<!--              <p style="white-space: pre-wrap;" v-html="change(props.row.scp_result)"></p>-->
<!--            </el-button>-->
<!--            <div v-else @click="openDialog(props.row)" type="text">-->
<!--              <p style="white-space: pre-wrap;" v-html="change(props.row.scp_result)"></p>-->
<!--            </div>-->
<!--          </template>-->
<!--        </shopee-table-column>-->

        <shopee-table-column prop="OKR" label="OKR"  :width="80" v-if="typeId==='Leader' || typeId==='PM'"></shopee-table-column>
         <shopee-table-column prop="all_story_points"  label="总工时" :width="100" v-if="typeId==='Leader'"></shopee-table-column>

        <shopee-table-column prop="risk" label="风控等级" :width="125" v-if="typeId==='PM'"></shopee-table-column>
         <shopee-table-column prop="uat_start_date" label="UAT开始时间" :width="125" v-if="typeId==='PM'"></shopee-table-column>
<!--        <shopee-table-column prop="Status" label="UAT时间" :width="125" v-if="typeId==='PM'"></shopee-table-column>-->
        <shopee-table-column prop="reporter" label="跟进人"  :width="125" v-if="typeId==='Leader'"></shopee-table-column>
<!--        <shopee-table-column prop="qa" label="QA" :width="125" v-if="typeId!=='QA'"></shopee-table-column>-->

        <shopee-table-column prop="be_story_points" label="BE 工时" :width="80" ></shopee-table-column>
        <shopee-table-column prop="fe_story_points" label="FE 工时" :width="80" ></shopee-table-column>
        <shopee-table-column prop="qa_story_points" label="QA 工时" :width="80" ></shopee-table-column>

        <shopee-table-column prop="be_end_date" label="BE duedate" :width="125" ></shopee-table-column>
        <shopee-table-column prop="fe_end_date" label="FE duedate" :width="125" ></shopee-table-column>
        <shopee-table-column prop="qa_end_date" label="QA duedate" :width="125" ></shopee-table-column>

<!--         <shopee-table-column prop="qa_list" label="QA" :width="225" ></shopee-table-column>-->
        <shopee-table-column prop="components" label="components" :width="100" ></shopee-table-column>
        <shopee-table-column prop="labels" label="标签" :width="100" ></shopee-table-column>
         <shopee-table-column prop="be_list" label="BE" :width="225" ></shopee-table-column>
        <shopee-table-column prop="fe_list" label="FE" :width="225" ></shopee-table-column>

        <shopee-table-column prop="task_status"  label="风控提醒" :width="125"  v-if="typeId==='Leader'"></shopee-table-column>
        <shopee-table-column prop="task_status" :width="125" label="任务状态" fixed="right" v-if="typeId!=='Leader'"></shopee-table-column>
      </shopee-table>

      <el-dialog title="增量覆盖率详情" :visible.sync="centerDialogVisible" width="60%">
          <el-table :data="UrlData">
            <el-table-column prop="project" label="项目" width="200"></el-table-column>
            <el-table-column prop="in_rate" label="增量覆盖率" width="150"></el-table-column>
            <el-table-column label="增量覆盖率链接" width="600">
              <template slot-scope="{row}">
                <div slot="reference">
                        <el-link target="_blank" :href="row.url" type="primary">{{row.url}}</el-link>
                </div>
              </template>
            </el-table-column>
          </el-table>
      </el-dialog>
    </div>
</template>

  <script>
    import {api, getRequest} from "@/api/commit";

    export default {
      name : "JiraTable",
      data() {
        return {
          loading:false,
          centerDialogVisible: false,
          UrlData:[],
          tableData: [],
          typeId:"QA",
          typeList: [{
              id: "QA",
              name: 'QA'
            },{
              id: "PM",
              name: 'PM'
            },{
              id: "BE",
              name: 'BE'
            },{
              id: "FE",
              name: 'FE'
            },{
              id: "Leader",
              name: 'Leader'
            }],
        }
      },
      computed: {
         fixed: function () {
           if(this.typeId==='Leader'){
             return 'left'
           }else {
             return ""
           }
          }
      },
      methods: {
        openDialog: function(row){
          console.log(row)
          this.centerDialogVisible = true,
          this.UrlData = row.scp_url
        },
        change:function(content){
          if (content) {//判断undefined
            content = content.replace(/;/g,"</br>");
            content = content.replace(/；/g,"</br>");
            return content;
          }
        },
        changetypeId(){
          this.$cookies.set('typeId',this.typeId)
          this.$route.query.typeId=""
          // this.init_data()
          this.$router.replace({'typeId':''})
          location.reload()
        },
        init_select() {
          if (this.$route.query.typeId === "QA"
              || this.$route.query.typeId === "PM"
              || this.$route.query.typeId === "BE"
              || this.$route.query.typeId === "FE"
              || this.$route.query.typeId === "Leader") {
             this.typeId=this.$route.query.typeId
             this.$cookies.set('typeId',this.typeId)
           }else{
              var typeId=this.$cookies.get('typeId')
            // console.log(typeId)
            if(typeId!==null){
               this.typeId=typeId
            }
          }

        },
        init_data() {
          this.loading=true;
          getRequest(api['jira_view_task'],{typeId:this.typeId}).then((res) => {
            res = res.resultReturn
            this.tableData= res.data
            this.loading=false;
          }, (error) => {
            console.info(error)
          })
        }
      },
      created() {
        this.init_select()
      },
      mounted () {
        this.init_data()
      }
    }
  </script>
